<script>
    $("body").on("click", "#icon-box > .iconContainer", function () {
        changeIcon($(this).children("img").attr("id").split(":")[1], this);
    });
    
    function changeIcon(icon, self) {
        socket.emit("changeIcon", icon);
        
        socket.on("iconChanged", function () {
                $("#icon-box").children("div").each(function () {
                    $(this).css({opacity: "0.4", filter: "alpha(opacity=40)", cursor: "pointer"});
                });
                
                $(self).css({opacity : "1", filter: "alpha(opacity=100)", cursor: "default"});
                
            	socket.emit("updateIcon");
        });
    }
    
    socket.on("updateVoteCount", function (voteCount) {
        $("#voteCount").html("Votes left: " + voteCount + "/5");
        console.log(voteCount);
    });
</script>

<div id="loggedInBox"><div id="nameBox"></div></div>

<a href="#account-logged-main-nav" class="open-menu">
    <div id="loggedInBox-settings">

    </div>

</a>

<!-- START ACCOUNT LOGGED SETTINGS -->

<nav class="account-loggedIn-main-nav" id="account-logged-main-nav">
    <a href="#">
        <div id="account-create-account-main-nav-navigation-box">
            <img src="bilder/cross-right-menu-black.png" onmouseover="this.src='bilder/cross-right-menu-blue.png';" onmouseout="this.src='bilder/cross-right-menu-black.png'">
        </div>

    </a>
    <div id="account-login-description">
        <!--<h4 id ="account-name">You are logged in as </h4>
        <div id="email"><b>Email:</b> </div>-->
        <h4>Get upvotes and use those as currency to buy new icons. </h4>
        <h5 id="voteCount"></h5>
    </div>

    <div id="account-logged-in-settings">
        <h4><b>YOUR ICONS</b></h4>
        <h6>Click to change icon</h6>
        <div id="icon-box"></div>
        <div style="position: absolute; bottom: 70px; left: 20px; right: 20px; width: 400px;">
            <h4 style="border-top: 1px solid #696969; padding-top: 10px;"><b>BUY NEW ICONS</b></h4>
            <div id="voteBalance"></div>
            <div id="icon-price"><h5>Icon price: (hover to display)</h5></div>
            <div id="icon-box-nowned"></div>
        </div>
    </div>

    <div id="account-logged-in-logout">
        <button id="loggedInSubmit" onclick="logout();"><h3>Log out</h3></button>
        <!--<a href="#account-logged-update-nav"><button id="loggedchangesetting"><h3>Change Settings</h3></button></a>!-->
    </div>



</nav>

<!-- END ACCOUNT LOGGED SETTINGS -->

<!-- START ACCOUNT LOGGED SETTINGS -->

<nav class="account-loggedIn-main-nav" id="account-logged-notifications-main-nav">
    <a href="#">
        <div id="account-create-account-main-nav-navigation-box">
            <img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-32.png"  alt="Navigation Button">
        </div>

    </a>
    <div id="account-login-description">
        <h4>You have <FONT COLOR="0088cc">2</FONT> new notifications.</h4>
    </div>

    <div id="account-notifications-container">
        <h5 class="notifications-new">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications-new">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
        <h5 class="notifications">[00:57] Fredrik has mentioned you in the chat Fotball.</h5>
    </div>

</nav>

<!-- END ACCOUNT LOGGED SETTINGS -->

<nav class="account-login-main-nav" id="account-logged-update-nav">    
    <a href="#">
        <div id="account-create-account-main-nav-navigation-box">
            <img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-32.png"  alt="Navigation Button">
        </div>
    </a>

    <div id="account-login-description">
        <h4 id ="account-name">
            Fill in the fields you want to change.    
        </h4>
    </div>

    <div id="account-update-account">
        <form onsubmit="updateProfile();" class="account-create-account-info-form">


            <h4>Old password (required)</h4>   
            <input id="oldPassword" type="password" autocomplete="off" placeholder="" required>
            <br>
            <br>
            <br>

            <h4>Change E-mail</h4>   
            <input id="emailInput" type="text" autocomplete="off" placeholder="">   
            <br>
            <br>
            <br>
            <h4>Create New Password</h4>        
            <input id="passwordInputRegister" type="password" autocomplete="off" placeholder="">
            <br>
            <br>
            <h6>(Only letters A-Z, a-z & numbers 1-9)</h6>
            <h4>Repeat New Password</h4>        
            <input id="repeatedPassword" type="password" autocomplete="off" placeholder=""> 

            <input id="account-create-account-button" type="submit" value="Update Profile">

        </form>
    </div>

    <div id="error_message"></div>

</nav>